<template>
  <div>
    <van-dialog
      v-model:show="showDialog"
      :showConfirmButton="false"
      :showCancelButton="false"
    >
      <div class="c-linear-D5E2FF w-325 p-20 rounded-15 text-333333 relative">
        <div class="absolute right-20 top-10" @click="showDialog = false">
          <svg-icon name="icon-shanchuxian" :size="14" color="#333333" />
        </div>
        <div class="text-16 font-bold text-center">请上传清晰人脸照片哦～</div>
        <div class="mt-20 text-FF4A35 text-13 text-center">
          未识别到人脸可能会导致视频合成失败哦
        </div>
        <div class="flex justify-between mt-15 text-13">
          <div
            v-for="item in UPLOAD_IMG_STANDARD_LIST"
            :key="item.id"
            class="flex flex-col justify-center items-center"
          >
            <div class="w-60 h-60 rounded-10">
              <van-image class="size-full" :src="item.src" />
            </div>
            <div class="mt-6">{{ item.name }}</div>
          </div>
        </div>
        <div
          class="mt-20 bg-F6F7F8 py-10 px-15 rounded-10 text-666666 text-12 text-center"
        >
          <div class="text-13">
            <svg-icon name="icon-chengnuo" :size="16" color="#FF4A35" />
            <span class="pl-10">用户照片不收集承诺</span>
          </div>
          <div class="mt-10">
            我们承诺不收集任何用户信息，您的照片仅用于视频合成，不会被用作其他目的。请勿使用未获得本人授权同意的照片。
          </div>
        </div>
        <div
          class="flex items-center mt-20"
          :class="{ 'animate-shake': isShaking }"
          @click="changeIsAgreePolicy"
        >
          <div
            v-if="!isAgreePolicy"
            class="w-15 h-15 rounded-[50%] border border-solid border-CCCCCC"
          />
          <svg-icon v-else name="icon-chenggong" :size="15" color="#FF4A35" />
          <div class="flex items-center ml-5 text-12 text-666666">
            <div>我已阅读并同意</div>
            <div class="text-2614FF" @click.stop="handleAgreementPopup(1)">
              《服务协议》
            </div>
            <div>和</div>
            <div class="text-2614FF" @click.stop="handleAgreementPopup(2)">
              《隐私政策》
            </div>
          </div>
        </div>
        <div class="mt-12">
          <ButtonFooter button-text="去上传" @confirm="handleUploadConfirm" />
        </div>
      </div>
      <div
        class="mt-10 flex justify-center items-center"
        @click="changeNotTipNext"
      >
        <div
          v-if="!notTipNext"
          class="w-14 h-14 rounded-[50%] border border-solid border-white"
        />
        <div
          v-else
          class="w-14 h-14 rounded-[50%] bg-2614FF flex justify-center items-center"
        >
          <svg-icon name="icon-duihao" :size="8" color="#FFFFFF" />
        </div>
        <div class="text-white text-13 pl-5">我知道了，下次不再显示</div>
      </div>
    </van-dialog>
    <agreement-popup
      v-if="agreementPopupVisible"
      v-model:visible="agreementPopupVisible"
      :agreement-type="agreementType"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { UPLOAD_IMG_STANDARD_LIST } from "@/constants";
import AgreementPopup from "@/components/AgreementPopup/index.vue";
defineOptions({
  name: "UploadImgTips"
});
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});
// 抖动动画控制
const isShaking = ref(false);
// 处理上传确认
const handleUploadConfirm = () => {
  if (!isAgreePolicy.value) {
    // 如果未同意协议，触发动画
    isShaking.value = true;
    // 一段时间后移除动画类
    setTimeout(() => {
      isShaking.value = false;
    }, 1000);
    return;
  }

  // 如果已同意协议，执行原有逻辑
  // 这里可以添加上传逻辑
};
// 协议弹窗
const agreementPopupVisible = ref(false);
// 协议类型
const agreementType = ref(1);
// 协议弹窗
const handleAgreementPopup = (type: number) => {
  agreementType.value = type;
  agreementPopupVisible.value = true;
};
// 同意协议
const isAgreePolicy = ref(false);
// 切换协议
const changeIsAgreePolicy = () => {
  isAgreePolicy.value = !isAgreePolicy.value;
};
// 下次是否显示
const notTipNext = ref(false);
// 切换是否显示
const changeNotTipNext = () => {
  notTipNext.value = !notTipNext.value;
};

// 父组件调用emit方法，通知子组件
const emit = defineEmits(["update:visible"]);

// 弹窗内部状态
const showDialog = ref(props.visible);

// 监听父组件传入的visible变化
watch(
  () => props.visible,
  newVal => {
    showDialog.value = newVal;
  }
);

// 监听弹窗内部状态变化，通知父组件
watch(showDialog, newVal => {
  if (!newVal) {
    emit("update:visible", false);
  }
});
</script>

<style scoped>
.iconfont.icon-chenggong {
  background-image: linear-gradient(99deg, #6c3dff 0%, #0f07ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}

.animate-shake {
  animation: shake 0.8s ease-in-out;
}
</style>
